<template>
 <el-container class="home_contianer">
    <!-- 顶部区域 -->
    <el-header>
        <div>
            <img src="../assets/logo.png" alt="logo">
            <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="logOut" class="exit-btn">退出登录</el-button>
    </el-header>
    <!-- 中间主体 -->
    <el-container>
        <!-- 侧边栏 -->      
        <el-aside :width="iscollapse ? '64px' : '200px'">
            <!-- 控制侧边栏的展开和收拢btn -->
            <div class="btn_collapse" @click="toggleCollpase">
                <i class="el-icon-attract" :class="{'icon-collapse':iscollapse}"></i>
            </div>

            <el-menu
            :default-active="activePath"
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            unique-opened 
            :collapse="iscollapse"
            :collapse-transition="false"
            router>
            <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
                <template slot="title">
                    <i :class="iconsType[item.id]"></i>
                    <span>{{item.authName}}</span>
                </template>
                
                <el-menu-item 
                    :index="'/'+subItem.path" 
                    v-for="subItem in item.children" 
                    :key="subItem.id"
                    @click="setActivePath('/'+subItem.path)">
                    <template slot="title">
                        <i class="el-icon-caret-right"></i>
                        <span>{{subItem.authName}}</span>
                    </template>                   
                </el-menu-item>               
            </el-submenu>
           
            </el-menu>
        </el-aside>
        <!-- 右边主体 -->
        <el-main>
            <router-view></router-view>
        </el-main>

    </el-container>
</el-container>

</template>

<script>
export default {
    name:'home',
    data(){
        return{
            menuList:[],
            iconsType:{
                '125':'el-icon-user-solid',
                '103':'el-icon-s-opportunity',
                '101':'el-icon-s-shop',
                '102':'el-icon-s-order',
                '145':'el-icon-s-marketing'
                
            },
            iscollapse:false,
            activePath:''
        }
    },
    created(){
        this.getMenuList();
        this.activePath = window.sessionStorage.getItem('activePath');
        //console.log(this.activePath);
    },
    methods:{
        logOut(){
            window.sessionStorage.clear();
            this.$router.push('/login');
        },
        async getMenuList(){ //获取左侧menu数据
           const {data: res} = await this.$http('menus')
           if(res.meta.status != '200') return this.$message.error(res.meta.msg)

           this.menuList = res.data
            // console.log(this.menuList);
        },
        toggleCollpase(){
            this.iscollapse = !this.iscollapse
        },
        setActivePath(activepath){
            this.activePath = activepath;
            window.sessionStorage.setItem('activePath',activepath)
        }
    }
}
</script>

<style lang="scss" scoped>
.home_contianer{
    width: 100%;
    height: 100%;
}

.el-header{
    background-color: #373741;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    img{
        width: 50px;
        margin-right: 10px;
    }
    span{
        color: #fff;
    }
    .exit-btn{
        padding: 12px 10px
    }
}
.el-aside{
    background-color: #333744;
    .btn_collapse{
        width: 100%;
        background-color: #2d3244;
        padding: 10px 0;
        i{
            display: block;
            margin: 0 auto;
            width: 20px;
            font-size: 20px;
            color: #bababa;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
        }
        .icon-collapse{
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
        }
        
    }
}
.el-main{
    background-color: #EAEDF1;
}
.el-menu{
    border-right: none;
}
</style>